<template>
  <div class="zm-products">
    <!-- 精装改造页面 -->
    <div class="center">
      <!-- banner -->
      <div class="banner">
        <img src="../../public/mxcp_img/jzgz/Banner.jpg" alt="" />
        <!-- 跳转到咨询页面 -->
        <button class="btn1">在线咨询 ></button>
        <!-- 弹出报名弹窗 -->
        <button class="btn2">立即报名 ></button>
      </div>
      <!-- F1 -->
      <div class="f1">
        <img src="../../public/mxcp_img/jzgz/title01.jpg" alt="" />
      </div>
      <!-- F2 -->
      <div class="swiper1">
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide class="swiper-slide">
            <img src="../../public/mxcp_img/jzgz/wt01.png" alt="" />
          </swiper-slide>
          <swiper-slide class="swiper-slide">
            <img src="../../public/mxcp_img/jzgz/wt02.png" alt="" />
          </swiper-slide>
          <swiper-slide class="swiper-slide">
            <img src="../../public/mxcp_img/jzgz/wt03.png" alt="" />
          </swiper-slide>
          <swiper-slide class="swiper-slide">
            <img src="../../public/mxcp_img/jzgz/wt04.png" alt="" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <!-- 弹出预约窗口 -->
        <button class="btn">预约精装验房服务 ></button>
      </div>

      <!-- F3 -->
      <div class="f3">
        <div class="f3_title2">
          <img src="../../public/mxcp_img/jzgz/title02.jpg" alt="" />
        </div>
        <div class="f3_body">
          <img src="../../public/mxcp_img/jzgz/jzgz1.jpg" alt="" />
          <img src="../../public/mxcp_img/jzgz/jzgz2.jpg" alt="" />
          <img src="../../public/mxcp_img/jzgz/jzgz3.jpg" alt="" />
          <img src="../../public/mxcp_img/jzgz/jzgz4.jpg" alt="" />
        </div>
      </div>

      <!-- F4 -->
      <div class="f4">
        <div class="f4_title3">
          <img src="../../public/mxcp_img/jzgz/title03.jpg" alt="" />
        </div>
        <div class="f4_body">
          <img class="pp" src="../../public/mxcp_img/jzgz/pp.png" alt="" />

          <swiper class="swiper2" :options="swiperOption">
            <swiper-slide class="swiper-slide">
              <img src="../../public/mxcp_img/jzgz/lb01.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="swiper-slide">
              <img src="../../public/mxcp_img/jzgz/lb02.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="swiper-slide">
              <img src="../../public/mxcp_img/jzgz/lb03.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="swiper-slide">
              <img src="../../public/mxcp_img/jzgz/lb04.jpg" alt="" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>

      <!-- F5 -->
      <div class="f5">
          <!-- <div class="f5_title4"> -->
              <img src="../../public/mxcp_img/jzgz/title04.jpg" alt="">
          <!-- </div> -->
          <!-- <div class="f5_body"> -->
              <img src="../../public/mxcp_img/jzgz/gy.jpg" alt="">
          <!-- </div> -->
      </div>
      
      <!-- F6 -->
      <div class="f6">
          <img class="f6_title5" src="../../public/mxcp_img/jzgz/title05.png" alt="">
          <img class="f6_hpq" src="../../public/mxcp_img/jzgz/hpq.jpg" alt="">
      </div>

      <!-- F7 -->
      <div class="f7">
          <yu-yue/>          
      </div>
    </div>
  </div>
</template>

<script>
import YuYue from './YuYue.vue';
export default {
  components: { YuYue },
  data() {
    return {
      swiperOption: {
        loop: true,
        effect: "fade",
        autoplay: {
          delay: 3500, //滚动间隔时长
          // 用户操作swiper之后,是否要停止自动滚动. 默认true
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //可以点击
        },
      },
    };
  },
};
</script>

<style lang="scss">
.zm-products {
  width: 100%;
  .center {
    width: 100%;
    .banner {
      width: 100%;
      position: relative;

      img {
        width: 100%;
        display: block;
      }

      button {
        height: 40px;
        padding: 5px 20px;
        border: none;
        border-radius: 4px;
        color: #fff;
      }

      .btn1 {
        position: absolute;
        bottom: 100px;
        left: 320px;
        background-color: #40558b;
      }

      .btn2 {
        position: absolute;
        bottom: 100px;
        left: 420px;
        margin-left: 40px;
        background-color: #91422d;
      }
    }
    .f1 {
      width: 100%;
      img {
        width: 100%;
        display: block;
      }
    }
    .swiper1 {
      width: 100%;
      padding: 60px 0;
      text-align: center;
      .swiper {
        width: 100%;
        .swiper-slide {
          width: 100%;
          img {
            width: 100%;
            display: block;
          }
        }
        .swiper-pagination {
          .swiper-pagination-bullet {
            background: rgba(200, 200, 200, 0.6);
            opacity: 1;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 0 10px;
          }
          .swiper-pagination-bullet-active {
            background: #894128;
          }
        }
      }

      .btn {
        width: 210px;
        height: 50px;
        background-color: #894128;
        border: none;
        color: white;
        margin-top: 60px;
        font-size: 18px;
        text-align: center;
      }
    }

    .f3 {
      width: 100%;
      .f3_title2 {
        width: 100%;
        img {
          width: 100%;
          display: block;
        }
      }
      .f3_body {
        width: 100%;
        img {
          width: 100%;
          display: block;
        }
      }
    }

    .f4 {
      width: 100%;
      .f4_title3 {
        width: 100%;
        img {
          width: 100%;
          display: block;
        }
      }
      .f4_body {
        width: 100%;
        background-image: url('../../public/mxcp_img/jzgz/bjlb.jpg');
        padding-top: 50px;
        .pp {
          width: 90%;
          display: block;
          margin: 0 auto;
        }
        .swiper2 {
          width: 100%;
          position: relative;
          padding: 60px 0;
          img {
            width: 90%;
            display: block;
            margin: 0 auto;
          }

          .swiper-pagination {
              position: absolute;
              bottom: 90px;
            .swiper-pagination-bullet {
              background: rgba(200, 200, 200, 0.6);
              opacity: 1;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              margin: 0 10px;
            }
            .swiper-pagination-bullet-active {
              background: #fff;
            }
          }
        }
      }
    }

    .f5{
        width: 100%;
        img{
            width: 100%;
            display: block;
        }
    }

    .f6{
        width: 100%;
        img{
            // width: 100%;
            display: block;
            margin: 0 auto;
        }
        .f6_title5{
            width: 60%;
            margin: 50px auto;
        }
        .f6_hpq{
            width: 100%;
        }
    }

    .f7{
        width: 100%;
        img{
            width: 100%;
        }
    }
  }
}
</style>